<template>
  <!-- 数值统计，分为三列：1.总和，2.某一情况 3.其他情况 -->
  <div>
    <van-grid :column-num="count.length" :border="false">
      <van-grid-item
        v-for="(item,index) in count"
        :key="index"
        :class="['hu-count',`hu-count${index}`]"
        :style="item.flexBasis?'flexBasis:'+item.flexBasis:''"
        @click="clickItem(index)"
      >
        <span :class="['hu-count-num',`hu-count-num${index}`]">
          <slot :name="`item${index}`">{{ item.num }}</slot>
        </span>

        <span :class="['hu-count-text',`hu-count-text${index}`]">{{ item.text }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "HuCount",
  components: {},
  props: {
    // 数值统计
    count: {
      /**
       * {
       *    text:'显示文字'
       *    num:'具体数值'
       *    flexBasis:'40', 某一格子所占据的宽度比例
       * }
       */
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },
  methods: {
    clickItem(index) {
      this.$emit(`click-item-${index}`);
    },
  },
};
</script>

<style lang="less" >
@import "@/less/color";

.hu-count {
  position: relative;
  height: 91px;
  &::after {
    content: "";
    position: absolute;
    right: 0;
    top: 27px;
    bottom: 26px;
    width: 1px;
    background: #efeff0;
  }

  &:last-child {
    &::after {
      display: none;
    }
  }

  // 数值样式
  .hu-count-num {
    font-size: 22px;
    color: #191d20;
    line-height: 30px;
  }
  .hu-count-num1 {
    color: @blue;
  }
  .hu-count-num2 {
    color: #eb9b00;
  }

  // 文字样式
  .hu-count-text {
    margin-top: 4px;
    color: #939393;
    line-height: 17px;
  }
}
</style>